<template>
  <div class="mm-menu">
    <!-- 一级导航菜单 -->
    <ul ref="pMenu" :class="[isSMenu?subopened:isBMenu?subopened:'']" class="mm-list mm-panel mm-opened">
      <li v-for="( item,index ) in firstMenuList" :key="index">
        <a @click="openSubMenu(item.id)" class="mm-subopen iconfont icon-enter"></a>
        <a> {{item.title}} </a>
      </li>
    </ul>
    <!-- 二级导航菜单 -->
    <ul ref="sMenu" :class="[isSMenu?opened:isBMenu?subopened:'']" class="mm-list mm-panel">
      <li class="mm-subtitle">
        <a @click="returnProvNav" class="mm-subopen iconfont icon-return"></a>
        <a class="mm-subclose"> {{secondTitle}} </a>
      </li>
      <li v-for="( item,index ) in secondMenuList" :key="index">
        <a @click="openBottomSubMenu(item.id)" class="mm-subopen iconfont icon-enter"></a>
        <a> {{item.title}} </a>
      </li>
    </ul>
    <!-- 三级菜单 -->
    <ul :class="[isBMenu?opened:'']" class="mm-list mm-panel">
      <li class="mm-subtitle">
        <a @click="returnSubNav" class="mm-subopen iconfont icon-return"></a>
        <a class="mm-subclose"> {{thirdTitle}} </a>
      </li>
      <li v-for="( item,index ) in thirdMenuList" :key="index">
        <a> {{item.title}} </a>
      </li>
    </ul>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapMutations, mapActions } = createNamespacedHelpers( 'sliderNav' )
export default {
  data() {
    return {
      isSMenu: false,
      opened: 'mm-opened',
      subopened: 'mm-subopened',
      firstMenuList: [],
      secondMenuList: [],
      thirdMenuList: [],
      secondTitle: '',
      thirdTitle: ''
    }
  },
  mounted() {
    this.getTypes().then(data => {
      this.firstMenuList = data
    })
  },
  computed: {
    ...mapState(['isBMenu'])
  },
  methods: {
    ...mapMutations(['changeIsBMenu']),
    ...mapActions(['getTypes']),
    // 显示二级导航
    openSubMenu(id) {
      this.isSMenu = true
      this.getTypes().then(data => {
        let arr = data.filter(function(key, value) {
          return key.id == id
        })
        this.secondMenuList = arr[0].children
        this.secondTitle = arr[0].title
      })
    },
    // 返回上一级导航----二级返回一级
    returnProvNav() {
      this.isSMenu = false
    },
    // 显示三级导航
    openBottomSubMenu(id) {
      this.isSMenu = false
      this.changeIsBMenu(true)
      let arr = this.secondMenuList
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].id == id) {
          this.thirdMenuList = arr[i].children
          this.thirdTitle = arr[i].title
        }
      }
    },
    // 返回上一级导航----三级返回二级
    returnSubNav() {
      this.thirdMenuList = []
      this.thirdTitle = ''
      this.isSMenu = true
      this.changeIsBMenu(false)
    }
  }
}
</script>

<style scoped>
/* 表示当前打开的菜单添加的样式 */
.mm-menu > .mm-panel.mm-opened {
  left: 0%;
}
/* 表示当前正在打开的是子菜单，父菜单需要添加的样式 */
.mm-menu > .mm-panel.mm-subopened {
  left: -40%;
}

/* .mm-menu > .mm-panel.mm-highest {
  z-index: 1;
}
.mm-menu > .mm-panel.mm-hidden {
  display: block;
  visibility: hidden;
} */

/* 侧边导航 */
.mm-menu {
  width: 80%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.6);
  background-color: #333333;
  padding: 0;
}
.mm-menu > .mm-panel {
  transition: left 0.5s ease;
  background: inherit;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 0;
  box-sizing: border-box;
}
.mm-menu > .mm-list {
  padding: 20px 0 40px 0;
  font-size: 14px;
}
.mm-list > li {
  position: relative;
  margin-left: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.mm-list > li:after {
  content: '';
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
.mm-list .mm-subopen {
  width: 40px;
  height: 100%;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
}
.mm-list > li > a,
.mm-list > li > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: inherit;
  line-height: 20px;
  display: block;
  padding: 10px 10px 10px 0;
  margin: 0;
}
.mm-list > li > a.mm-subclose {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(255, 255, 255, 0.3);
}
.mm-list a.mm-subclose {
  text-indent: 20px;
  padding-top: 30px;
  margin-top: -20px;
  padding-left: 20px;
}
.mm-list > .mm-subtitle {
  margin-left: 0;
}
.mm-list > .mm-subtitle a:first-child {
  top: 20px;
  left: 3px;
  color: rgba(255, 255, 255, 0.3);
  height: auto;
}
</style>
